<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css"/>
  <link rel="stylesheet" type="text/css" href="lib/plugins/leaflet.marker.highlight.css"/>
  <link rel="stylesheet" type="text/css" href="css/map.css"/>
  <script src="lib/leaflet/leaflet.js"></script>
  <script src="lib/plugins/leaflet.ChineseTmsProviders.js"></script>
  <script src="lib/plugins/leaflet.marker.highlight.js"></script>
  <script src="lib/plugins/leaflet-tilelayer-wmts-src.js"></script>
  <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
  <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
  <title>用矢量插件加载</title>
</head>
<body>
<div id="map"></div>
<script src="js/createMap.js"></script>
<script src="js/common.js"></script>
<script src="js/interface.js"></script>
<script src="lib/jquery.js"></script>
<script>
  switchBaseLayer("谷歌","卫星图");
  map.setView(L.latLng( 32.73563140,112.0754814),8);
  var url="http://gykj123.cn:9035/api/v1/tilesets/gykj/dt_zzdk/{z}/{x}/{y}.pbf";
  var vectorTileOptions = {
    layerURL: url,
    rendererFactory: L.canvas.tile,
    // tms: true,//根据自己的情况调整true还是false
    vectorTileLayerStyles: {
      'dt_zzdk': function (properties, zoom) {//dt_zzdk为切片图层名称
          return {
            weight: 2,
            color: 'red',
            opacity: 1,
            fillColor: 'yellow',
            fill: true,
            radius: 6,
            fillOpacity: 0.0
          }
      }
    },
    interactive: true,	//开启VectorGrid触发mouse/pointer事件
    getFeatureId: function (f) {
      return f.properties.objectid;
    }
  };
  var vectorTile = new L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);
  //为每个点注册一个mouseover事件
  vectorTile.on('mouseover', function (e) {
    var properties = e.layer.properties;
    L.popup()
        .setContent(properties.name || properties.type)
        .setLatLng(e.latlng)
        .openOn(map);
  });

</script>

</body>
</html>